<template>
  <a-row :gutter="10">
    <a-col :md="4" :sm="24">
      <a-card :bordered="false">
        <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
          <a-input-search @search="onSearch" style="width:100%;margin-top: 10px;margin-bottom: 10px" placeholder="请输入分类名称"/>
          <a-alert type="info" :showIcon="true">
            <div slot="message">
              当前选择：<span v-if="this.currSelected.categoryName">{{ getCurrSelectedTitle() }}</span>
              <a v-if="this.currSelected.categoryName" style="margin-left: 10px" @click="onClearSelected">取消选择</a>
            </div>
          </a-alert>
          <template >

            <!--组织机构-->
            <a-tree
              showLine
              :selectedKeys="selectedKeys"
              :checkStrictly="true"
              @select="onSelect"
              :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
              :treeData="categoryTree"
              :autoExpandParent="autoExpandParent"
              :expandedKeys="iExpandedKeys"
              @expand="onExpand"
              :replace-fields="replaceFields"
            />


          </template>
        </div>
      </a-card>
    </a-col>
    <a-col :md="20" :sm="24">
      <a-card :bordered="false">
        <datalib-logic-table-list ref="datalibLogicTableList"  :currSelected="currSelected"></datalib-logic-table-list>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
import { getDblibCategory } from '@api/apiDatalib'
import DatalibLogicTableList from './DatalibLogicTableList.vue'

export default {
  components: {
    DatalibLogicTableList
  },
  data() {
    return {
      categoryTree: [],
      iExpandedKeys: [],
      replaceFields: {
        children: 'children',
        title: 'categoryName',
        key: 'id',
      },
      expandedKeys: ['0-0-0', '0-0-1'],
      autoExpandParent: true,
      checkedKeys: ['0-0-0'],
      selectedKeys: [],
      currSelected: {},
      paramName:''
    }
  },

  mounted() {
    this.load()
  },
  methods: {
    //加载树
    load() {
      var that = this
      that.categoryTree = []
      const param = {'categoryName': that.paramName}
      getDblibCategory(param).then((res) => {
        if (res.success) {
          //部门全选后，再添加部门，选中数量增多
          this.allTreeKeys = []
          for (let i = 0; i < res.result.length; i++) {
            let temp = res.result[i]
            that.categoryTree.push(temp)
          }
          this.loading = false
        }
      })
      console.log('this.categoryTree', this.categoryTree)
    },


    onSearch(value) {
      this.paramName = value
      this.load()
    },
    onExpand(expandedKeys) {
      // console.log('onExpand', expandedKeys)
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.iExpandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onSelect(selectedKeys, e) {
        this.hiding = false
        let record = e.node.dataRef
        console.log('onSelect-record', record)
        this.currSelected = record
        this.selectedKeys = [record.id]
        console.log(this.currSelected)
        console.log(this.selectedKeys)
    },
    getCurrSelectedTitle() {
      return !this.currSelected.categoryName ? '' : this.currSelected.categoryName
    },
    onClearSelected() { //取消选中
      this.hiding = true
      this.currSelected = {}
      this.selectedKeys = []
    },

  }
}
</script>